<template>
  <div class="alarmTypes-root">
    <formTitleVue
      title="预警类型分布"
      :selectOptions="selectOptions"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPie domId="warnAnalysis-warnType-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myPie from '@/components/Echarts/myPie.vue';
  import { time_select_optios } from '@/utils/global.js';
  import {  warnCvWarnTypesDistribution } from '@/api/alarm/statistics'
  export default {
    name: "alarmTypes",
    components: {
      formTitleVue,myPie,
    },
    props: {
      alarmTypeOptions: {
        type: Array,
        default: [],
      },
      dateValueMap:{
        type: Object,
        default: {},
      },
      dataSelectOptions:{
        type: Array,
        default: [],
      }
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "全部类型",
            options:this.alarmTypeOptions,
            changeFn:this.changeType
          },
          {
            selectValue: 1,
            options:this.dataSelectOptions,
            changeFn:this.changeDate
          },
        ],
        chartsData: {

          yData: []
        },
        echartsOption:{

        },
        searChForm: {
          startTime: '',
          endTime: '',
          areaCode:'',
          placeType:'',
          modeType:''
        },
      };
    },
    methods: {
      changeType(val){
        console.log("changeType：",val)
        this.searChForm.modeType = val
        this.getData()
      },
      changeDate(item){
        console.log("changeDate：",item)
        this.searChForm.startTime = this.dateValueMap[item].startTime+ " 00:00:00"
        this.searChForm.endTime = this.dateValueMap[item].endTime+ " 23:59:59"
        this.getData()
      },
      async getData(){
        this.searChForm.areaCode = this.$store.state.account.user.deptIds;
        this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
        let respon = await warnCvWarnTypesDistribution(this.searChForm);

        this.chartsData.yData = [
          {
            name:"预警类型分布",
            data: respon.data.report
          }
        ]
        this.chartsData.yData.forEach(item => {
          item.data.forEach(item => {
            item.label = {
              normal:{
                show: true,
                formatter: "{b} {d}%",
              }
            }
          })
        })
      },
    },
    mounted() {
      this.changeDate(1)
    },
  };
</script>

<style lang="scss" scoped>
  .alarmTypes-root {
    #echarts-types {
      height: 30vh;
    }
  }
</style>
